<template>
  <div class="nav-menu">
    <div class="logo">
      <img class="img" src="~@/assets/img/logo.svg" alt="logo" />
      <span v-show="!collapse" class="title">Vue3+TS</span>
    </div>
    <el-menu
      class="el-menu-vertical"
      background-color="#0c2135"
      :collapse="collapse"
      text-color="#b7bdc3"
      active-text-color="#0a60bd"
      :default-active="defaultValue"
    >
      <template v-for="item in userMenus" :key="item.path + ''">
        <el-sub-menu :index="item.path + ''" v-if="item.children.length > 1">
          <template #title>
            <Setting :class="collapse ? 'icon-collapse' : 'icon'" />
            <span>{{ item.meta.title }}</span>
          </template>
          <template v-for="subitem in item.children" :key="subitem.path">
            <el-menu-item
              :index="item.path + '/' + subitem.path"
              @click="handleItemClick(item.path + '/' + subitem.path)"
            >
              <template #title>
                <span>{{ subitem.meta.title }}</span>
              </template>
            </el-menu-item>
          </template>
        </el-sub-menu>
        <el-menu-item
          v-else
          :index="item.path + '/' + item.children[0].path + ''"
          @click="handleItemClick(item.path + '/' + item.children[0].path)"
          :style="{ width: collapse ? '70px' : '100%' }"
        >
          <Setting :class="collapse ? 'icon-collapse' : 'icon'" />
          <span>{{ item.children[0].meta.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { asyncRoute } from '@/router'

const props = withDefaults(
  defineProps<{
    collapse: boolean
  }>(),
  {
    collapse: false,
  }
)

const router = useRouter()
const route = useRoute()
const currentPath = route.path
interface RouteType {
  path?: string
  component?: any
  redirec?: string
  name?: string
  hidden?: boolean
  meta?: any
  children?: RouteType[]
}
const filterRoute = (router: RouteType[]) => {
  let route = []
  route = router.filter((item) => {
    if (item.hidden) return
    if (item.children) {
      item.children = item.children.filter((item) => !item.hidden)
    }
    return item
  })
  return route
}
const userMenus = filterRoute(asyncRoute)
const menuPath = userMenus[0].path + '/' + userMenus[0]?.children[0].path
const defaultValue = currentPath === menuPath ? menuPath : currentPath

const handleItemClick = (path: any) => {
  router.push({
    path: path ?? '/not-found',
  })
}
</script>

<style scoped lang="scss">
// 混合
.selectActiveColor {
  color: white !important;
}

.icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 8px;
}
.icon-collapse {
  width: 3em;
  height: 3em;
  margin-right: 10px;
}

.nav-menu {
  height: 100%;
  // width: 100%;

  // logo 布局
  .logo {
    display: flex;
    height: 28px;
    padding: 12px 10px 8px 10px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .img {
      height: 100%;
      margin-right: 10px;
      margin-left: 5px;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: white;
    }
  }

  .el-menu {
    border-right: none;
  }
  .el-menu-vertical {
    // 没有设置100%, 右边会突出（因为子布局比父亲大）
    width: 100%;
    border-right: none;

    // 目录
    .el-sub-menu {
      // 二级菜单 ( 默认背景 )
      /* background-color: #0c2135 !important;
      .el-sub-menu__title span {
        color: wheat !important;
      } */
      .el-menu-item {
        padding-left: 50px !important;
        background-color: #0c2135 !important;
      }
    }
    // 二级菜单选中
    .el-menu-item.is-active {
      color: white !important;
      /* background-color: #0a60bd !important; */
      color: rgb(64, 158, 255) !important;
    }
  }
  :deep(.el-tooltip__trigger) {
    width: 100px;
  }
}
</style>
